<template>
    <div class="container">
        <div class="tabCommonTitle">
            <span>附件</span>
        </div>
        <p class="list_title">
            <span class="list_name">专利证书</span>
            <a-button class="shangchuan pointer" @click="upload_zlzs" :class="is_modify=='Y'?'':'disabled'" :disabled="is_modify=='Y'?false:true">添加</a-button>
        </p>
        <div class="tableList">
            <table style="text-align:center;" width="1110"  align="center" cellpadding="">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>附件名称</th>
                        <th>上传状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody v-if="zlzslist.length">
                    <tr v-for="(item, index) in zlzslist" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{item.fjWjMc}}</td>
                        <td>{{item.filePath!='' ?'成功':''}}</td>
                        <td>
                            <!-- <a>
                                <a-icon type="eye" @click="preview_zlzs(item.filePath)" />
                                <a-icon type="edit" @click="edit_zlzs(item.id)"/>
                                <a-icon type="delete" @click="del_zlzs(item.id)"/>
                            </a> -->
                            <a>
                                <img style="width:18px;height:18px;margin-right:22px;" @click="preview_zlzs(item.filePath)" src="@/assets/img/yulan.png" alt="">
                                <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-right:11px;" @click="edit_zlzs(item.id)" src="@/assets/img/bianji.png" alt="">
                                <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-left:11px;"  @click="del_zlzs(item.id)" src="@/assets/img/shanchu1.png" alt="">
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <p class="list_title">
            <span class="list_name">专利授权文本</span>
            <a-button class="shangchuan pointer" @click="upload_zlsq" :class="is_modify=='Y'?'':'disabled'" :disabled="is_modify=='Y'?false:true">添加</a-button>
        </p>
        <div class="tableList">
            <table style="text-align:center;" width="1110"  align="center" cellpadding="">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>附件名称</th>
                        <th>上传状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody v-if="zlsqlist.length">
                    <tr v-for="(item, index) in zlsqlist" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{item.fjWjMc}}</td>
                        <td>{{item.filePath!='' ?'成功':''}}</td>
                        <td>
                            <!-- <a>
                                <a-icon type="eye" @click="preview_zlsq(item.filePath)"/>
                                <a-icon type="edit" @click="edit_zlsq(item.id)"/>
                                <a-icon type="delete" @click="del_zlsq(item.id)"/>
                            </a> -->
                            <a>
                                <img style="width:18px;height:18px;margin-right:22px;" @click="preview_zlsq(item.filePath)" src="@/assets/img/yulan.png" alt="">
                                <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-right:11px;" @click="edit_zlsq(item.id)" src="@/assets/img/bianji.png" alt="">
                                <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-left:11px;"  @click="del_zlsq(item.id)" src="@/assets/img/shanchu1.png" alt="">
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
        <p class="list_title">
            <span class="list_name">其他附件</span>
            <a-button class="shangchuan pointer" @click="upload_qtfj" :class="is_modify=='Y'?'':'disabled'" :disabled="is_modify=='Y'?false:true">添加</a-button>
        </p>
        <div class="tableList">
            <table style="text-align:center;" width="1110"  align="center" cellpadding="">
                <thead>
                    <tr>
                        <th>序号</th>
                        <th>附件名称</th>
                        <th>上传状态</th>
                        <th>操作</th>
                    </tr>
                </thead>
                <tbody v-if="qtfjlist.length">
                    <tr v-for="(item, index) in qtfjlist" :key="index">
                        <td>{{index+1}}</td>
                        <td>{{item.fjWjMc}}</td>
                        <td>{{item.filePath!='' ?'成功':''}}</td>
                        <td>
                            <!-- <a>
                                <a-icon type="eye" @click="preview_qtfj(item.filePath)"/>
                                <a-icon type="edit" @click="edit_qtfj(item.id)"/>
                                <a-icon type="delete" @click="del_qtfj(item.id)"/>
                            </a> -->
                            <a>
                                <img style="width:18px;height:18px;margin-right:22px;" @click="preview_qtfj(item.filePath)" src="@/assets/img/yulan.png" alt="">
                                <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-right:11px;" @click="edit_qtfj(item.id)" src="@/assets/img/bianji.png" alt="">
                                <img v-if="is_modify=='Y'?true:false" style="width:18px;height:18px;margin-left:11px;"  @click="del_qtfj(item.id)" src="@/assets/img/shanchu1.png" alt="">
                            </a>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
         <a-modal
            v-drag-modal
			:title="modal_title"
            class="enclosure_modal"
			:visible="visible"
            :maskClosable="false"
            :width="500"
            @cancel="handleCancel"
		>
            <template slot="footer">
                <a-button @click="handleCancel">取消</a-button>
                <a-button key="submit" type="primary" :disabled="disabled_add" @click="handleSubmit">保存</a-button>
            </template>
			<a-form-model ref="ruleForm" :model="form" :rules="rules" >
				<a-form-model-item ref="fujianname" prop="fujianname" label="附件名称：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
					<a-input v-model="form.fujianname" placeholder="附件名称"  @blur="() => {$refs.fujianname.onFieldBlur();}"/>
				</a-form-model-item>
				<a-form-model-item ref="fujianfile" prop="fujianfile" label="上传文件（50M以内，pdf格式）：" :label-col="{ span:12 }" :wrapper-col="{ span: 8 }">
					<a-upload
                        action="#"
                        accept='.pdf'
                        :file-list="fileList"
                        :show-upload-list="showUploadList"
                        :before-upload="beforeUpload" 
                    >
                        <a-button style="width: 120px;height: 40px;line-height: 40px;margin:0;background:#fff;color:#333;"><a-icon type="upload" />上传</a-button>
                    </a-upload>
                    <!-- <a-input v-model="form.fujianfile" accept=".pdf" id="fujianfile" @change="handleUpload" type="file"/> -->
				</a-form-model-item>
			</a-form-model>
		</a-modal>
        <a-modal
            v-drag-modal
			:title="modal_title"
            class="enclosure_modal"
			:visible="visible_edit"
            :maskClosable="false"
            :width="500"
            @cancel="handleCancel_edit"
		>
            <template slot="footer">
                <a-button @click="handleCancel_edit">取消</a-button>
                <a-button key="submit" type="primary" :disabled="disabled_edit" @click="handleSubmit_edit">保存</a-button>
            </template>
			<a-form-model ref="ruleForm_edit" :model="form_edit" :rules="rules_edit" >
				<a-form-model-item ref="fujianname_edit" prop="fujianname_edit" label="附件名称：" :label-col="{ span: 4 }" :wrapper-col="{ span: 18 }">
					<a-input v-model="form_edit.fujianname_edit" placeholder="附件名称"  @blur="() => {$refs.fujianname_edit.onFieldBlur();}"/>
				</a-form-model-item>
				<a-form-model-item ref="fujianfile_edit" prop="fujianfile_edit" label="上传文件（50M以内，pdf格式）：" :label-col="{ span:12 }" :wrapper-col="{ span: 8 }">
					<a-upload
                        action="#"
                        accept='.pdf'
                        :file-list="fileList"
                        :show-upload-list="showUploadList" 
                        :before-upload="beforeUpload"
                    >
                        <a-button style="width: 120px;height: 40px;line-height: 40px;margin:0;background:#fff;color:#333;"><a-icon type="upload" />重新上传</a-button>
                    </a-upload>
                    <!-- <a-input v-model="form_edit.fujianfile_edit" accept=".pdf" id="fujianfile_edit" @change="handleUpload" type="file"/> -->
				</a-form-model-item>
                <a-form-model-item label="已上传文件： " :label-col="{ span:5 }" :wrapper-col="{ span: 17 }">
					<a-input v-model="form_edit.fujianrename_edit" disabled />
				</a-form-model-item>
			</a-form-model>
		</a-modal>
        <!-- <div class="showpdf" v-if="showpdf">
            <img class="closebtn pointer" @click="closepdf" src="@/assets/img/close1.png"/>
            <testPdf :cxj_cxj_id="cxj_cxj_id" :file-path="filePath"></testPdf>
        </div> -->
        <testPdf :cxj_cxj_id="cxj_cxj_id" :file-path="filePath" :showPdf="showpdf"></testPdf>
    </div>
</template>

<script>
import {
    zlsb_getZlsqwb,
    zlsb_zlsqwbAdd,
    zlsb_zlsqwbDelete,
    zlsb_zlsqwbList,
    zlsb_getZlzs,
    zlsb_zlzsAdd,
    zlsb_zlzsDelete,
    zlsb_zlzsList,
    zlsb_getQtfj,
    zlsb_qtfjAdd,
    zlsb_qtfjDelete,
    zlsb_qtfjList
} from '@/api/shenbao';
import testPdf from '@/views/declarationSystem/declare/testPdf';

    export default {
        name: 'patentEnclosure',
        props: ['is_modify'],
        data() {
            return {
                modal_title: '',
                visible: false,
                visible_edit: false,
                confirmLoading: false,
                cxj_cxj_id: '',
                form: {
                    fujianname: '',
                    fujianfile: ''
                },
                rules: {
                    fujianname: [
                        { required: true, message: '请填写附件名称',trigger: 'blur' }
                    ],
                    fujianfile: [{ required: true, message: '请上传文件',trigger: 'change' }],
                },
                form_edit: {
                    fujianname_edit: '',
                    fujianrename_edit: '',
                    fujianfile_edit: ''
                },
                rules_edit: {
                    fujianname_edit: [
                        { required: true, message: '请填写附件名称',trigger: 'blur' }
                    ],
                    fujianfile_edit: [],
                },
                files: '',
                upload_type: '',
                zlzslist: [],
                zlsqlist: [],
                qtfjlist: [],
                fileList: [],
                showUploadList: {
                    showDownloadIcon: false,
                    showRemoveIcon: false,
                },
                disabled_add: false,
                disabled_edit: false,
                showpdf: false,
                filePath: '',  
            }
        },
        components: {
            testPdf
        },
        props: ['is_modify'],
        methods: {
            handleCancel() {
                this.visible = false;
                this.disabled_add = false;
                this.files = '';
                this.resetForm();
            },
            handleCancel_edit() {
                this.visible_edit = false;
                this.disabled_edit = false;
                this.files = '';
                this.resetForm_edit();
            },
            upload_zlzs() {
                this.modal_title = '专利证书';
                this.edit_id = '';
                this.upload_type = 0;
                this.visible = true;
                this.files = '';
            },
            // closepdf() {
            //     this.filePath = '';
            //     this.showpdf = false;
            // },
            preview_zlzs(filePath) {
                // this.showpdf = true;
                this.showpdf = !this.showpdf;
                this.filePath = filePath;
                // let that = this;
                // let routeData = this.$router.resolve({
                //     path: '/shenbao/pdfFile',
                //     query: {
                //         cxj_cxj_id: that.cxj_cxj_id,
                //         path: filePath
                //     }
                // });
                // window.open(routeData.href, '_blank');
            },
            edit_zlzs(id) {
                this.modal_title = '专利证书';
                this.edit_id = id;
                this.upload_type = 0;
                this.visible_edit = true;
                this.files = '';
                let that = this;
                zlsb_getZlzs({cxj_cxj_id:that.cxj_cxj_id,id}).then(res=>{
                    if (res.data.code=='200') {
                        let data = res.data.result;
                        this.form_edit.fujianname_edit = data.fjWjMc;
                        this.form_edit.fujianrename_edit = data.fileRename;
                    }
                })
            },
            del_zlzs(id) {
                let that = this;
                this.$confirm({
                    content: '确定要删除该项吗？',
                    onOk() {
                        zlsb_zlzsDelete({
                            cxj_cxj_id: that.cxj_cxj_id,
                            id: id
                        }).then(res=>{
                            let data = res.data;
                            if (data.success) {
                                that.$message.success('删除成功');
                                that.get_zlsb_zlzsList();
                            } else {
                                that.$message.error(data.message);
                            }
                        })
                    },
                    cancelText: '取消',
                    onCancel() {
                        that.destroyAll();
                    },
                });
            },  
            upload_zlsq() {
                this.modal_title = '专利授权';
                this.edit_id = '';
                this.upload_type = 1;
                this.visible = true;
                this.files = '';
            },
            preview_zlsq(filePath) {
                // this.showpdf = true;
                this.showpdf = !this.showpdf;
                this.filePath = filePath;
                // let that = this;
                // let routeData = this.$router.resolve({
                //     path: '/shenbao/pdfFile',
                //     query: {
                //         cxj_cxj_id: that.cxj_cxj_id,
                //         path: filePath
                //     }
                // });
                // window.open(routeData.href, '_blank');
            },
            edit_zlsq(id) {
                this.modal_title = '专利授权';
                this.edit_id = id;
                this.upload_type = 1;
                this.visible_edit = true;
                this.files = '';
                let that = this;
                zlsb_getZlsqwb({cxj_cxj_id:that.cxj_cxj_id,id}).then(res=>{
                    if (res.data.code=='200') {
                        let data = res.data.result;
                        this.form_edit.fujianname_edit = data.fjWjMc;
                    }
                })
            },
            del_zlsq(id) {
                let that = this;
                this.$confirm({
                    content: '确定要删除该项吗？',
                    onOk() {
                        zlsb_zlsqwbDelete({
                            cxj_cxj_id: that.cxj_cxj_id,
                            id: id
                        }).then(res=>{
                            let data = res.data;
                            if (data.success) {
                                that.$message.success('删除成功');
                                that.get_zlsb_zlsqwbList();
                            } else {
                                that.$message.error(data.message);
                            }
                        })
                    },
                    cancelText: '取消',
                    onCancel() {
                        that.destroyAll();
                    },
                });
            }, 
            upload_qtfj() {
                this.modal_title = '其他附件';
                this.edit_id = '';
                this.upload_type = 2;
                this.visible = true;
                this.files = '';
            },
            preview_qtfj(filePath) {
                // this.showpdf = true;
                this.showpdf = !this.showpdf;
                this.filePath = filePath;
                // let that = this;
                // let routeData = this.$router.resolve({
                //     path: '/shenbao/pdfFile',
                //     query: {
                //         cxj_cxj_id: that.cxj_cxj_id,
                //         path: filePath
                //     }
                // });
                // window.open(routeData.href, '_blank');
            },
            edit_qtfj(id) {
                this.modal_title = '其他附件';
                this.edit_id = id;
                this.upload_type = 2;
                this.visible_edit = true;
                this.files = '';
                let that = this;
                zlsb_getQtfj({cxj_cxj_id:that.cxj_cxj_id,id}).then(res=>{
                    if (res.data.code=='200') {
                        let data = res.data.result;
                        this.form_edit.fujianname_edit = data.fjWjMc;
                    }
                })
            },
            del_qtfj(id) {
                let that = this;
                this.$confirm({
                    content: '确定要删除该项吗？',
                    onOk() {
                        zlsb_qtfjDelete({
                            cxj_cxj_id: that.cxj_cxj_id,
                            id: id
                        }).then(res=>{
                            let data = res.data;
                            if (data.success) {
                                that.$message.success('删除成功');
                                that.get_zlsb_qtfjList();
                            } else {
                                that.$message.error(data.message);
                            }
                        })
                    },
                    cancelText: '取消',
                    onCancel() {
                        that.destroyAll();
                    },
                });
            }, 
            resetForm() {
                this.edit_id = '';
                this.$nextTick(()=>{
                    this.$refs.ruleForm.resetFields();
                    this.fileList = [];
                })
            },
            resetForm_edit() {
                this.edit_id = '';
                this.$nextTick(()=>{
                    this.$refs.ruleForm_edit.resetFields();
                    this.fileList = [];
                })
            },
            onchangetime(date, dateString) {
                this.form.fujiantime = dateString;
            },
            beforeUpload(file) {
                if (file) {
                    if (file.size > 50*1024*1024) { // 此处判断上传文件的大小 , 单位为 b 故要乘以两个1024
                        this.$message.warning('文件最大为50兆')
                        return
                    } else if (file.type!='application/pdf') { // 此处判断上传文件的格式
                      this.$message.warning('请上传pdf格式的文件')
                      return
                    } else {
                        this.files = file;
                        this.form.fujianfile = file;
                        this.fileList = [file];
                    }
                    console.log(this.fileList)
                }
                return false;
            },
            handleUpload(e) {
                const files = e.target.files[0];
                if (files) {
                    this.files = files;
                }
            },
            handleSubmit(e) {
        		let that = this;
                this.disabled_add = true;
                this.$refs.ruleForm.validate(valid => {
                    if (valid) {
                        let formData = new FormData();
                        formData.append('cxj_cxj_id', that.cxj_cxj_id);
                        formData.append('fjWjMc', that.form.fujianname);
                        formData.append('file', this.files);
                        formData.append('id', '');
                        that.getData(formData);
                    } else {
                        return false;
                    }
                });
			},
            handleSubmit_edit() {
                let that = this;
                this.disabled_edit = true;
                this.$refs.ruleForm_edit.validate(valid => {
                    if (valid) {
                        let formData = new FormData();
                        formData.append('cxj_cxj_id', that.cxj_cxj_id);
                        formData.append('fjWjMc', that.form_edit.fujianname_edit);
                        if (this.files) {
                            formData.append('file', this.files);
                        }
                        formData.append('id', this.edit_id);
                        that.getData(formData);
                    } else {
                        return false;
                    }
                });
			},
            getData(formData) {
                let that = this;
                if (that.upload_type == '0') {
                    zlsb_zlzsAdd(formData).then(res=>{
                        if (this.edit_id) {
                            this.handleCancel_edit();
                        } else {
                            this.handleCancel();
                        }
                        if (res.data.code=='200') {
                            that.$message.success('保存成功');
                            that.get_zlsb_zlzsList();
                        } else {
                            that.$message.error(res.data.message);
                        }
                    }).catch(err=>{
                        this.disabled_add = false;
                        this.disabled_edit = false;
                    })
                } else if (that.upload_type == '1') {
                    zlsb_zlsqwbAdd(formData).then(res=>{
                        if (this.edit_id) {
                            this.handleCancel_edit();
                        } else {
                            this.handleCancel();
                        }
                        if (res.data.code=='200') {
                            that.$message.success('保存成功');
                            that.get_zlsb_zlsqwbList();
                        } else {
                            that.$message.error(res.data.message);
                        }
                    }).catch(err=>{
                        this.disabled_add = false;
                        this.disabled_edit = false;
                    })
                } else if (that.upload_type == '2') {
                    zlsb_qtfjAdd(formData).then(res=>{
                        if (this.edit_id) {
                            this.handleCancel_edit();
                        } else {
                            this.handleCancel();
                        }
                        if (res.data.code=='200') {
                            that.$message.success('保存成功');
                            that.get_zlsb_qtfjList();
                        } else {
                            that.$message.error(res.data.message);
                        }
                    }).catch(err=>{
                        this.disabled_add = false;
                        this.disabled_edit = false;
                    })
                }
            },
            destroyAll() {
                this.$destroyAll();
            },
            get_zlsb_zlzsList() {
                let that = this;
                zlsb_zlzsList({cxj_cxj_id: that.cxj_cxj_id}).then(res=>{
                    if (res.data.code=='200') {
                        that.zlzslist = res.data.result;
                    }
                })
            },
            get_zlsb_zlsqwbList() {
                let that = this;
                zlsb_zlsqwbList({cxj_cxj_id: that.cxj_cxj_id}).then(res=>{
                    if (res.data.code=='200') {
                        that.zlsqlist = res.data.result;
                    }
                })
            },
            get_zlsb_qtfjList() {
                let that = this;
                zlsb_qtfjList({cxj_cxj_id: that.cxj_cxj_id}).then(res=>{
                    if (res.data.code=='200') {
                        that.qtfjlist = res.data.result;
                    }
                })
            },
            init() {
                this.get_zlsb_zlzsList();
                this.get_zlsb_zlsqwbList();
                this.get_zlsb_qtfjList();
            },
        },
        mounted() {
            this.cxj_cxj_id = this.$route.query.cxj_cxj_id;
            this.init();
        }
    }
</script>

<style lang="less" scoped>
.list_title {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    margin-bottom: 25px;
    .list_name {
        font-size: 16px;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        color: #3388EE;
    }
}
.shangchuan {
    width: 70px;
    height: 32px;
    line-height: 32px;
    color:#fff;
    text-align: center;
    border: 1px solid #3388EE;
    background: #3388EE;
    margin-left: 10px;
    border-radius: 4px;
    display: inline-block;
}
.tableList {
    // padding-bottom: 30px;
    table {
        margin-top: 20px;
        background: #FFFFFF;
        thead {
            background: #F5F5F5;
            tr {
                th {
                    height: 60px;
                    font-size: 16px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                }
            }
        }
        tbody {
            tr {
                height: 52px;
                border-bottom: 1px solid #E8E8E8;
                td {
                    color: #444444;
                    font-size: 14px;
                    font-weight: 400;
                    height: 52px;
                }
            }
        }
    }
}
</style>